<template>
	<view class="home">
		<view class="home-gif" @click="open">
			<image :src='mod?"../../static/images/home-open.gif":"../../static/images/home-close.gif"' mode=""></image>
		</view>
		<view class="home-view" :class="[entertoClass,enterClass,enterActiveClass]">
			<navigator open-type="switchTab" url="/pages/index/index" class="home-view-a iconfont icon-shouye-xianxing"></navigator>
			<navigator open-type="switchTab" url="/pages/cart/cart" class="home-view-a iconfont icon-caigou-xianxing"></navigator>
			<navigator open-type="switchTab" url="/pages/user/user" class="home-view-a iconfont iconfont icon-yonghu1"></navigator>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				mod:true,
				enterClass:"home-enter",
				entertoClass:"",
				enterActiveClass:""
			}
		},
		methods:{
			open:function(){
				if(this.mod){
					this.enterClass = ""
					this.entertoClass = "home-enter-to"
					this.enterActiveClass = "home-enter-active"
				}else{
					this.enterClass = "home-enter"
					this.entertoClass = ""
					this.enterActiveClass = ""
				}
				this.mod = !this.mod
			}
		}
	}
</script>

<style scoped>
	.home{
		position: fixed;
		bottom: 100rpx;
		color: white;
		text-align: center;
		z-index: 999;
		right: 10rpx;
		height: 86rpx;
		width: 86rpx;
		display: flex;
		align-items: center;
	}
	.home-gif{
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
		z-index: 10;
	}
	.home-gif image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		transform: rotate(90deg);
	}
	.home-view{
		border-radius: 50rpx;
		box-sizing: border-box;
		height: 86rpx;
		background-color: #f44939;
		color: #f44939;
		color: #fff;
		position: absolute;
		top: 0;
		display: flex;
		align-items: center;
	}
	.home-view-a{
		font-size: 48rpx;
		width: 100rpx;
		display: inline-block;
	}
	.home-enter{
		left: 0;
		opacity: 0;
	}
	.home-enter-to{
		left: -320rpx;
		opacity: 1;
	}
	.home-enter-active{
		transition: left .3s cubic-bezier(.215,.61,.355,1);
		/* animation: bounceInRight .5s cubic-bezier(.215,.61,.355,1); */
	}
	@-ms-keyframes bounceInRight{
		0%{	
			opacity: 0;
			left: 0;
		}
		60%{
			opacity: 1;
			left: -345rpx;
		}
		75%{
			opacity: 1;
			left: -310rpx;
		}
		90%{
			left: -325rpx;
		}
		100%{
			left: -320rpx;
		}
	}
</style>
